<!DOCTYPE html>
<html>

	<head>
		<meta charset="gb2312">
		<title>swiper</title>
		<script src="Js/jquery-1.10.2.min.js" type="text/javascript"></script>
		<link rel="stylesheet" href="css/swiper-3.4.0.min.css">
		<script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js"></script>
		<style>
			body {}
			
			#swiper {
				width: 90%;
				min-width: 1080px;
				margin-top: 200px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.swiper-container {
				padding-bottom: 50px;
			}
			
			.swiper-scrollbar {
				height: 10px !important;
				display: none;
			}
			
			.swiper-slide {
				width: 140px;
				height: 200px;
				text-align: center;
			}
			
			.swiper-slide img {
				margin-top: 95px;
				width: 100%;
				cursor: pointer;
				box-reflect: below 2px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0) 70%, rgba(250, 250, 250, 0.5));
				-webkit-box-reflect: below 2px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0) 70%, rgba(250, 250, 250, 0.5));
			}
			
			.swiper-slide h4,
			.swiper-slide span {
				display: none;
			}
			
			.swiper-slide-active {
				width: 280px;
			}
			
			.swiper-slide-active img {
				margin-top: 0;
				width: 100%;
			}
			
			.swiper-slide-active h4,
			.swiper-slide-active span {
				display: inline;
				color: rgba(255, 255, 255, 0);
			}
			
			#swiper .scrollbar {
				width: 100%;
				height: 15px;
				background-color: #101010;
				border-radius: 10px;
				border: 1px solid #363636;
				display: none;
			}
			
			#swiper .scrollbar .bar {
				width: 8%;
				height: 13px;
				background-color: #000;
				border-radius: 10px;
				border: 1px solid #fff;
			}
			
			#scrollbarIp {
				-webkit-appearance: none;
				border-radius: 10px;
				height: 15px;
				width: 100%;
			}
			
			#scrollbarIp::-webkit-slider-thumb {
				-webkit-appearance: none;
			}
			
			#scrollbarIp::-webkit-slider-runnable-track {
				height: 15px;
				background-color: #101010;
				border-radius: 10px;
				border: 1px solid #363636;
			}
			
			#scrollbarIp:focus {
				outline: none;
			}
			
			#scrollbarIp::-webkit-slider-thumb {
				-webkit-appearance: none;
				height: 13px;
				width: 10%;
				background: #000;
				border-radius: 10px;
				border: 1px solid #fff;
			}
		</style>
		<script>
			var imgsLength;
			var isBarMove = false;
			var imgSwiper;
			var imgSwiperRate = 100;
			$(function() {
				imgsLength = 8;
				imgSwiper = new Swiper('#swiper .swiper-container', {
					//scrollbar: '.swiper-scrollbar',
					//scrollbarHide: false,
					//scrollbarDraggable: true,
					//scrollbarSnapOnRelease: true,
					slidesPerView: 'auto',
					centeredSlides: true,
					slideToClickedSlide: true,
					spaceBetween: 5,
					grabCursor: true,
					onSlideChangeEnd: function(swiper) {
						var value = parseInt(swiper.activeIndex) * imgSwiperRate;
						if(imgsLength - 1 == parseInt(swiper.activeIndex)) {
							value = imgsLength * imgSwiperRate - imgSwiperRate / 2;
						}
						$('#scrollbarIp').val(value);
					}
				});

				$('#scrollbarIp').attr('max', imgsLength * imgSwiperRate - imgSwiperRate / 2);
			});

			function barDown() {
				isBarMove = true;
			}

			function barUp() {
				isBarMove = false;
			}

			function barMove(e) {
				if(isBarMove) {
					//var left = parseInt($('#swiper .scrollbar .bar').css('margin-left')) + ;
					//$('#swiper .scrollbar .bar').css('margin-left', e.clientX);
				}
			}

			function scrollbarIpChange() {
				var value = parseInt(parseInt($('#scrollbarIp').val()) / imgSwiperRate);
				if(value < imgsLength) {
					imgSwiper.slideTo(value, 500, false);
				}
			}
		</script>
	</head>

	<body>
		<div id="swiper">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div><img src="images/integration_img01.jpg"></div>
						<h4>img001</h4>
					</div>
					<div class="swiper-slide">
						<div><img src="images/integration_img02.jpg"></div>
						<h4>img002</h4>
					</div>
					<div class="swiper-slide"><img src="images/integration_img03.jpg">
						<h4>img003</h4>
					</div>
					<div class="swiper-slide"><img src="images/integration_img04.jpg">
						<h4>img004</h4>
					</div>
					<div class="swiper-slide"><img src="images/integration_img05.jpg">
						<h4>img005</h4>
					</div>
					<div class="swiper-slide"><img src="images/integration_img06.jpg">
						<h4>img006</h4>
					</div>
					<div class="swiper-slide"><img src="images/integration_img07.jpg">
						<h4>img007</h4>
					</div>
					<div class="swiper-slide"><img src="images/integration_img08.jpg">
						<h4>img008</h4>
					</div>
				</div>
				<div class="swiper-scrollbar"></div>
			</div>
			<div class="scrollbar">
				<div class="bar" onmousedown="barDown()" onmouseout="barUp()" onmousemove="barMove(event)"></div>
			</div>
			<input type="range" id="scrollbarIp" min="0" max="100" value="0" oninput="scrollbarIpChange()">
		</div>
	</body>

</html>